<!--
    by: yuanbiao 2020年09月15日
    name: x-loading
    notes:
-->
<template>
  <div :class="classes" @click="clickHandler">
    <div :class="`${prefixCls}__content`">
      <div :class="`${prefixCls}__dot`" v-show="!$slots.default"></div>
      <div :class="`${prefixCls}__text`" v-show="$slots.default">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
const prefixCls = 'x-loading'
export default {
  name: 'x-loading',
  props: {
    fullscreen: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default' // default|large|small
    },
    fix: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prefixCls: prefixCls
    }
  },
  computed: {
    classes () {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-${this.size}`]: !!this.size,
          [`${prefixCls}-fix`]: this.fix || this.fullscreen,
          [`${prefixCls}-fullscreen`]: this.fullscreen
        }
      ]
    }
  },
  methods: {
    clickHandler () {
      this.$emit('click')
    }
  }
}
</script>
